import React, { useState, useEffect } from 'react'
import { Modal, Space, Button, Tabs, Descriptions, Table, Row, Col } from 'antd';
import ModifyCustomer from './../modifyCustomer/ModifyCustomer';
import './style.css'
import './../btn.css'
const { TabPane } = Tabs;
export default function CustomerDetails(props) {
  const { setisModalDetail, setisModalVisible, userInfo } = props
  const [isShowModify, setisShowModify] = useState(false)

  //修改用户信息
  const modifyInfo = () => {
    setisShowModify(true);
  };

  /*  const okModify = () => {
     setisShowModify(false);
   }; */

  const cancelModify = () => {
    setisShowModify(false);
  };
  const [desUserInfo, setdesUserInfo] = useState([]);
  const [data, setdata] = useState([
    {
      key: '1',
      sheetList: '客户列表',
      behavior: '新增',
      comment: '录入客户',
      operator: '张三',
      time: '2022-03-30 08:53',
    },
    {
      key: '2',
      sheetList: '客户列表',
      behavior: '修改',
      comment: '测试',
      operator: '张三',
      time: '2022-03-31 08:53',
    },
  ]);
  const columns = [
    {
      title: '数据表',
      dataIndex: 'sheetList',
    },
    {
      title: '行为',
      dataIndex: 'behavior',
      render: ((item) => {
        // console.log(item)
        if (item == '新增') {
          return <span style={{ color: '#488DC9' }}>{item}</span>
        } else if (item == '修改') {
          return <span style={{ color: '#469F8E' }}>{item}</span>
        }
      })
    },
    {
      title: '备注',
      dataIndex: 'comment',

    },
    {
      title: '操作员',
      dataIndex: 'operator',

    },
    {
      title: '时间',
      dataIndex: 'time',

    }
  ]
  const handleCancel = () => {
    setisModalVisible(false);
  };
  function callback(key) {
    // console.log(key);
  }

  const tabList = [
    { key: "0", title: "基本资料" },
    { key: "1", title: "附件管理" },
    { key: "2", title: "客户共享" },
    { key: "3", title: "操作记录" },
  ]
  useEffect(() => {
    const arr = [
      { label: '客户名称', value: userInfo.name },
      { label: '职位', value: userInfo.jobType },
      { label: '联系人', value: userInfo.Contact },
      { label: '手机号码', value: userInfo.phone },
      { label: 'QQ', value: userInfo.qqNumber },
      { label: '客户类型', value: userInfo.customerType },
      { label: '客户级别', value: userInfo.customerLevel },
      { label: '客户来源', value: userInfo.source },
      { label: '录入时间', value: userInfo.time },
      { label: '最后更新', value: userInfo.updateTime },
      { label: '电子邮箱', value: userInfo.email },
      { label: '生日', value: userInfo.birthDay },
      { label: '所属行业', value: userInfo.customerIndustry },
      { label: '商品分类', value: userInfo.bigClass + '-' + userInfo.smallClass },
      { label: '所在地区', value: userInfo.customerLocation },
      { label: '详细地址', value: userInfo.address },
      { label: '录入者', value: userInfo.employeeInputName },
      { label: '备注', value: userInfo.remarks },
      { label: '邮编', value: userInfo.postcode },
      { label: '网址', value: userInfo.url },
    ]
    // console.log(desUserInfo);
    setdesUserInfo(arr)
    return () => {

    }

  }, [userInfo])
  const [activeKey, setactiveKey] = useState('0');
  const renderTabBar = () => {
    return (
      <Space>
        {
          tabList.map(item =>
            <Button
              type='primary'
              className={item.key == activeKey ? 'btn-bgc-active' : 'btn-bgc-unactive '}
              key={item.key}
              onClick={() => setactiveKey(item.key)}
            >
              {item.title}
            </Button>)
        }
      </Space>
    )
  }
  return (
    <>
      <div>

        <Tabs activeKey={activeKey} onChange={callback} type="card" renderTabBar={() => renderTabBar()} >
          {/* 客户基本资料 */}
          <TabPane tab="基本资料" key="0">
            <Descriptions className='my-des' column={2} title="基本信息" layout='vertical' style={{ paddingTop: 20 }} >
              {
                desUserInfo && desUserInfo.map((item, index) =>
                  <Descriptions.Item key={index} label={item.label}><div style={{ width: 280, border: '1px solid gray', height: 30, lineHeight: '30px' }}>{item.value}</div></Descriptions.Item>
                )
              }
              <Descriptions.Item  >
                <div style={{ width: '100%' }}>
                  <div style={{ width: '30%', margin: '0 auto' }}>
                    <Button
                      type='primary'
                      block danger
                      onClick={() => modifyInfo()}
                    >修改</Button>
                  </div>
                </div>
              </Descriptions.Item>
            </Descriptions>
          </TabPane>
          <TabPane tab="附件管理" key="1">
            Content of Tab Pane 1
          </TabPane>
          <TabPane tab="客户共享" key="2">
            Content of Tab Pane 2
          </TabPane>
          <TabPane tab="操作记录" key="3">
            <Table dataSource={data} columns={columns} />
          </TabPane>
        </Tabs>

        <Modal
          title='修改'
          visible={isShowModify} onCancel={cancelModify}
          width={600}
          bodyStyle={{ height: 520, overflowY: 'scroll' }}
          footer={[]}
        >
          <div style={{ fontWeight: 'bolder', textAlign: 'center', marginBottom: 24 }}>基本信息</div>

          <ModifyCustomer userInfo={userInfo}
            setisShowModify={setisShowModify}
            setisModalDetail={setisModalDetail} />

          
        </Modal>
      </div>

    </>
  )
}
